<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="nav">
        <div class="navbar">
            <ul>
                <li><a href="#">logo</a></li>
                <li><a href="#">list1</a></li>
                <li><a href="#">list2</a></li>
                <li><a href="#">list3</a></li>
            </ul>
            <ul>
                <li><a href="#">list4</a></li>
                <li><a href="#">list5</a></li>
                <li><a href="#">list6</a></li>
                <li><a href="#">list7</a></li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div style="width: 450px;">
                <h4 class="h">图片</h4>
                <img src="images/0.jpg" class="border" width="200" alt="">
                <img src="images/1.jpg" class="shadow" width="200" alt="">
                <img src="images/2.jpg" class="round" width="200" alt="">
            </div>
            <div class="change">
                <h4 class="h">按钮</h4>
                <button type="button">按钮</button>
                <button type="button" class="grey">按钮</button>
                <button type="button" class="primary">按钮</button>
                <button type="button" class="primary round">按钮</button>
                <button type="button" class="grey circle">钮</button>
                
                <div>
                    <h4 class="h">输入框</h4>
                    <input type="text">
                    <input type="password">
                    <textarea name="" id="" cols="300" rows="50"></textarea>
                    <select>
                        <option value="volvo">Volvo</option>
                        <option value="audi">Audi</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="change">
                <h4 class="h">文字</h4>
                <p>With MySpace becoming more popular every day, there is the constant need to be different. There are millions of users. If MySpace layouts are chosen well, then you can enhance your profile a great deal.</p>
            </div>
        </div>
        <div class="hr"></div>
        <div class="row">
            <div class="change">
                <div class="title">列表1</div>
                <ul class="ul">
                    <li>列表1</li>
                    <li>列表2</li>
                    <li>列表3</li>
                    <li>列表4</li>
                </ul>
            </div>
            <div>
                <div class="title">表格</div>
                <table class="table">
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>地址</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>盖伦</td>
                        <td>翻斗花园</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>盖伦</td>
                        <td>翻斗花园</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>盖伦</td>
                        <td>翻斗花园</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="row">
            <div>
                <div class="title">列表2</div>
                <ul class="list">
                    <li>skull1111</li>
                    <li>skull</li>
                    <li>skull</li>
                    <li>skull</li>
                </ul>
            </div>
            <div class="change">
                <div class="title">图标</div>
                <i class="iconfont icon-shouye_huaban"></i>
                <i class="iconfont icon-dingdan_huaban"></i>
                <i class="iconfont icon-shoucang_huaban"></i>
                <i class="iconfont icon-shezhi_huaban"></i>
                <i class="iconfont icon-wode_huaban"></i>
                <i class="iconfont icon-xihuan_huaban"></i>
                <i class="iconfont icon-dianzan_huaban"></i>
                <i class="iconfont icon-sousuo_huaban"></i>
                <i class="iconfont icon-xiaoxi_huaban"></i>
                <i class="iconfont icon-huishouzhan_huaban"></i>
                <i class="iconfont icon-youhuiquan_huaban"></i>
                <i class="iconfont icon-hongbao_huaban"></i>
                <i class="iconfont icon-lishijilu_huaban"></i>
                <i class="iconfont icon-qianbao_huaban"></i>
                <i class="iconfont icon-gouwuche_huaban"></i>
                <i class="iconfont icon-tianjia_huaban"></i>
                <i class="iconfont icon-shanchu_huaban"></i>
                <i class="iconfont icon-tianjia_huaban1"></i>
                <i class="iconfont icon-shanchu_huaban1"></i>
                <i class="iconfont icon-shuaxin_huaban"></i>
                <i class="iconfont icon-chexiao_huaban"></i>
                <i class="iconfont icon-zhongzuo_huaban"></i>
                <i class="iconfont icon-shangchuan_huaban"></i>
                <i class="iconfont icon-xiazai_huaban"></i>
                <i class="iconfont icon-fenxiang_huaban"></i>
                <i class="iconfont icon-jietu_huaban"></i>
                <i class="iconfont icon-baocun_huaban"></i>
                <i class="iconfont icon-bianji_huaban"></i>
                <i class="iconfont icon-yidong_huaban"></i>
                <i class="iconfont icon-quanping_huaban"></i>
                <i class="iconfont icon-quxiaoquanping_huaban"></i>
                <i class="iconfont icon-suoding_huaban"></i>
                <i class="iconfont icon-jiesuo_huaban"></i>
                <i class="iconfont icon-saoyisao_huaban"></i>
                <i class="iconfont icon-gengxin_huaban"></i>
                <i class="iconfont icon-youxiang_huaban"></i>
                <i class="iconfont icon-dianhua_huaban"></i>
                <i class="iconfont icon-dizhi_huaban"></i>
                <i class="iconfont icon-wangzhi_huaban"></i>
                <i class="iconfont icon-shijian_huaban"></i>
                <i class="iconfont icon-lianjie_huaban"></i>
                <i class="iconfont icon-tupian_huaban"></i>
                <i class="iconfont icon-tianjiatupian_huaban"></i>
                <i class="iconfont icon-tianjiayonghu_huaban"></i>
                <i class="iconfont icon-yonghuguanli_huaban"></i>
                <i class="iconfont icon-wenzhang_huaban"></i>
                <i class="iconfont icon-bianjiwenzhang_huaban"></i>
                <i class="iconfont icon-gengduo_huaban"></i>
                <i class="iconfont icon-quanbu_huaban"></i>
                <i class="iconfont icon-xiangji_huaban"></i>
                <i class="iconfont icon-naozhong_huaban"></i>
            </div>
        </div>
    </div>
</body>
</html>